body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}

/* my code */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto); // 手动设置隐式网格大小
  gap: 1rem;
}

/*
显式网格是我们用grid-template-columns或grid-template-rows属性创建的.
而隐式网格则是当有内容被放到网格外时才会生成的.
简单来说，隐式网格就是为了放显式网格放不下的元素，浏览器根据已经定义的显式网格自动生成的网格部分.
因为这个例子里没有设定grid-template-rows，因此，所有行都位于隐式网格内.
隐式网格中生成的行/列大小是参数默认是auto，大小会根据放入的内容自动调整.
当然，你也可以使用grid-auto-rows和grid-auto-columns属性手动设定隐式网格的大小.

minmax 函数为一个行/列的长宽尺寸设置了闭区间的取值范围
*/